<template>
  <div class="data-visualization">
    <div class="visualization-header">
      <h2>选址数据分析</h2>
      <el-select v-model="analysisType" placeholder="选择分析类型" @change="changeAnalysisType">
        <el-option label="人流量分析" value="footTraffic" />
        <el-option label="消费能力" value="consumption" />
        <el-option label="竞争对手分布" value="competition" />
        <el-option label="区域评分" value="areaScore" />
      </el-select>
    </div>
    
    <div class="charts-container">
      <div class="chart-item">
        <div class="chart-header">
          <h3>{{ chartTitles[analysisType] }}</h3>
          <el-radio-group v-model="timeRange" size="small" @change="updateChartData">
            <el-radio-button label="日" />
            <el-radio-button label="周" />
            <el-radio-button label="月" />
          </el-radio-group>
        </div>
        <div :id="mainChartId" ref="mainChart" class="main-chart" :style="{ width: '100%', height: '300px' }"></div>
      </div>
      
      <div class="sub-charts">
        <div class="chart-item">
          <h3>年龄分布</h3>
          <div id="ageChart" ref="ageChart" class="sub-chart" :style="{ width: '100%', height: '200px' }"></div>
        </div>
        <div class="chart-item">
          <h3>消费偏好</h3>
          <div id="preferenceChart" ref="preferenceChart" class="sub-chart" :style="{ width: '100%', height: '200px' }"></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { ref, onMounted, onUnmounted, inject } from 'vue'

export default {
  name: 'DataVisualization',
  setup() {
    const mainChart = ref(null)
    const ageChart = ref(null)
    const preferenceChart = ref(null)
    const mainChartId = 'mainChart'
    const analysisType = ref('footTraffic')
    const timeRange = ref('周')
    
    let mainChartInstance = null
    let ageChartInstance = null
    let preferenceChartInstance = null
    
    // 图表标题映射
    const chartTitles = {
      footTraffic: '人流量趋势',
      consumption: '消费水平分析',
      competition: '竞争对手分布',
      areaScore: '区域评分对比'
    }
    
    // 获取全局ECharts实例
    const { $echarts } = inject('globalProperties') || window
    
    // 初始化主图表
    const initMainChart = () => {
      if (mainChart.value && $echarts) {
        mainChartInstance = $echarts.init(mainChart.value)
        updateMainChart()
      }
    }
    
    // 初始化年龄分布图表
    const initAgeChart = () => {
      if (ageChart.value && $echarts) {
        ageChartInstance = $echarts.init(ageChart.value)
        
        const option = {
          tooltip: {
            trigger: 'item'
          },
          legend: {
            top: 'bottom'
          },
          series: [
            {
              name: '年龄分布',
              type: 'pie',
              radius: ['40%', '70%'],
              avoidLabelOverlap: false,
              itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2
              },
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: '18',
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data: [
                { value: 25, name: '18-25岁' },
                { value: 35, name: '26-35岁' },
                { value: 20, name: '36-45岁' },
                { value: 15, name: '46-55岁' },
                { value: 5, name: '55岁以上' }
              ]
            }
          ]
        }
        
        ageChartInstance.setOption(option)
      }
    }
    
    // 初始化消费偏好图表
    const initPreferenceChart = () => {
      if (preferenceChart.value && $echarts) {
        preferenceChartInstance = $echarts.init(preferenceChart.value)
        
        const option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            data: ['中餐', '西餐', '快餐', '咖啡', '甜品', '火锅']
          },
          yAxis: {
            type: 'value',
            max: 100
          },
          series: [
            {
              name: '偏好度',
              type: 'bar',
              data: [65, 42, 88, 72, 58, 68],
              itemStyle: {
                color: new $echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: '#409eff' },
                  { offset: 1, color: '#67c23a' }
                ])
              }
            }
          ]
        }
        
        preferenceChartInstance.setOption(option)
      }
    }
    
    // 更新主图表数据
    const updateMainChart = () => {
      if (!mainChartInstance) return
      
      let option = {}
      
      // 根据分析类型生成不同的图表
      switch (analysisType.value) {
        case 'footTraffic':
          option = getFootTrafficOption()
          break
        case 'consumption':
          option = getConsumptionOption()
          break
        case 'competition':
          option = getCompetitionOption()
          break
        case 'areaScore':
          option = getAreaScoreOption()
          break
        default:
          option = getFootTrafficOption()
      }
      
      mainChartInstance.setOption(option)
    }
    
    // 人流量趋势图表配置
    const getFootTrafficOption = () => {
      const days = timeRange.value === '日' ? 
        ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00'] : 
        timeRange.value === '周' ? 
        ['周一', '周二', '周三', '周四', '周五', '周六', '周日'] : 
        ['第1周', '第2周', '第3周', '第4周']
        
      const data = [1200, 800, 2500, 3800, 2200, 3100].slice(0, days.length)
      
      return {
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: days
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '人流量',
            type: 'line',
            stack: 'Total',
            data: data,
            smooth: true,
            lineStyle: {
              color: '#f56c6c'
            },
            areaStyle: {
              color: new $echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgba(245, 108, 108, 0.6)' },
                { offset: 1, color: 'rgba(245, 108, 108, 0.1)' }
              ])
            }
          }
        ]
      }
    }
    
    // 消费水平分析图表配置
    const getConsumptionOption = () => {
      return {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value'
        },
        yAxis: {
          type: 'category',
          data: ['0-30元', '30-50元', '50-80元', '80-120元', '120元以上']
        },
        series: [
          {
            name: '消费占比',
            type: 'bar',
            data: [15, 25, 30, 20, 10],
            itemStyle: {
              color: function(params) {
                const colorList = ['#f56c6c', '#e6a23c', '#67c23a', '#409eff', '#909399']
                return colorList[params.dataIndex]
              }
            }
          }
        ]
      }
    }
    
    // 竞争对手分布图表配置
    const getCompetitionOption = () => {
      return {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        series: [
          {
            name: '竞争对手类型',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '18',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 35, name: '中式快餐' },
              { value: 25, name: '西式快餐' },
              { value: 15, name: '咖啡馆' },
              { value: 15, name: '甜品店' },
              { value: 10, name: '其他' }
            ]
          }
        ]
      }
    }
    
    // 区域评分对比图表配置
    const getAreaScoreOption = () => {
      return {
        radar: {
          indicator: [
            { name: '人流量', max: 10 },
            { name: '消费水平', max: 10 },
            { name: '竞争程度', max: 10 },
            { name: '租金水平', max: 10 },
            { name: '交通便利', max: 10 },
            { name: '配套设施', max: 10 }
          ]
        },
        series: [
          {
            type: 'radar',
            data: [
              {
                value: [9, 8, 6, 7, 9, 8],
                name: '目标区域'
              },
              {
                value: [7, 7, 8, 6, 8, 7],
                name: '对比区域'
              }
            ]
          }
        ]
      }
    }
    
    // 切换分析类型
    const changeAnalysisType = () => {
      updateMainChart()
    }
    
    // 更新图表数据
    const updateChartData = () => {
      updateMainChart()
    }
    
    // 监听窗口大小变化，调整图表大小
    const handleResize = () => {
      if (mainChartInstance) mainChartInstance.resize()
      if (ageChartInstance) ageChartInstance.resize()
      if (preferenceChartInstance) preferenceChartInstance.resize()
    }
    
    // 组件挂载时初始化图表
    onMounted(() => {
      initMainChart()
      initAgeChart()
      initPreferenceChart()
      window.addEventListener('resize', handleResize)
    })
    
    // 组件卸载时销毁图表
    onUnmounted(() => {
      window.removeEventListener('resize', handleResize)
      if (mainChartInstance) mainChartInstance.dispose()
      if (ageChartInstance) ageChartInstance.dispose()
      if (preferenceChartInstance) preferenceChartInstance.dispose()
    })
    
    return {
      mainChart,
      ageChart,
      preferenceChart,
      mainChartId,
      analysisType,
      timeRange,
      chartTitles,
      changeAnalysisType,
      updateChartData
    }
  }
}
</script>

<style scoped>
.data-visualization {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.visualization-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.visualization-header h2 {
  margin: 0;
  color: #333;
}

.charts-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.chart-item {
  background: #f9f9f9;
  border-radius: 8px;
  padding: 15px;
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.chart-header h3 {
  margin: 0;
  color: #333;
  font-size: 16px;
}

.sub-charts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

@media (max-width: 768px) {
  .sub-charts {
    grid-template-columns: 1fr;
  }
}

.main-chart,
.sub-chart {
  border: 1px solid #e0e0e0;
  border-radius: 4px;
}
</style>